<template>
  <div style="margin: 30px auto;width: 50%;">
    <VeForm v-if="false" :model="O" :config="config">
      <el-form-item label="VeInput">
        <component :is="'ve-input'"
                   v-model="O.input"
                   :config="componentDef.input"
                   @change="myClick" />
      </el-form-item>

      <el-form-item label="VeRadio">
        <component :is="'ve-radio'"
                   v-model="O.radio"
                   :config="componentDef.radio"
                   @change="myClick" />
      </el-form-item>

      <el-form-item label="VCheckbox">
        <component :is="'ve-checkbox'"
          v-model="O.checkbox"
          :config="componentDef.checkbox" @change="myClick"/>
      </el-form-item>

      <el-form-item label="textarea">
        <component :is="'ve-input'"
          v-model="O.textarea"
          :config="componentDef.textarea" @change="myClick"/>
      </el-form-item>

      <el-form-item label="password">
        <component :is="'ve-input'"
          v-model="O.password"
          :config="componentDef.password" @change="myClick"/>
      </el-form-item>

      <el-form-item label="stepper">
        <component :is="'ve-stepper'"
          v-model="O.stepper"
          :config="componentDef.stepper" @change="myClick"/>
      </el-form-item>

      <el-form-item label="select">
        <component :is="'ve-select'"
          v-model="O.select"
          :config="componentDef.select" @change="myClick"/>
      </el-form-item>

      <el-form-item label="cascader">
        <component :is="'ve-cascader'"
          v-model="O.cascader"
          :config="componentDef.cascader" @change="myClick"/>
      </el-form-item>

      <el-form-item label="switcher">
        <component :is="'ve-switcher'"
          v-model="O.switcher"
          :config="componentDef.switcher" @change="myClick"/>
      </el-form-item>

      <el-form-item label="slider">
        <component :is="'ve-slider'"
          v-model="O.slider"
          :config="componentDef.slider" @change="myClick"/>
      </el-form-item>

      <el-form-item label="datePicker">
        <component :is="'ve-date-picker'"
          v-model="O.datePicker"
          :config="componentDef.datePicker" @change="myClick"/>
      </el-form-item>

      <el-form-item label="buttonGroup">
        <component :is="'ve-button-group'"
          v-model="O.buttonGroup"
          :config="componentDef.buttonGroup"
          @click="myClick($event, 11111)" />
      </el-form-item>
    </VeForm>
    <br>
    <br>
    <br>
    <!--<ve-form-builder v-model="fd" :config="config" />-->
  </div>
</template>
<script>
import { componentDef } from '@lib/config/components'
const componentMap = componentDef()
export default {
  data () {
    return {
      componentDef: componentMap,
      O: {
        input: '1',
        radio: '1',
        checkbox: ['1'],
        textarea: '1',
        password: '1',
        stepper: 1,
        slider: 50,
        select: '1',
        cascader: [1, 2, 3],
        switcher: true,
        datePicker: '',
        buttonGroup: ''
      },
      fd: {},
      config: {
        formProps: {
          labelWidth: '100px'
        },
        rules: {},
        elements: Object.keys(componentMap)
          .map(k => componentMap[k])
      }
    }
  },
  created () {
  },
  methods: {
    input (v) {
    },
    myClick () {
    }
  }
}
</script>
